<template>
  <el-card class="box-card">
    <div class="context">
      <div class="header">
        <span class="title">{{ title }}</span>
      </div>
      <div class="footer">
        <slot name="handle" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang='scss' scoped>
.box-card {
  padding:  5px 10px;
  width: 100%;

  .context {

    .header {

      .title {
        padding-bottom: 10px;
        font-size: 24px;
        border-bottom: 4px solid #8a97f8;
        color: #2c3e50;
      }

    }

    .footer {
      padding: 30px 0 12px 0;
    }

  }

}
</style>
